<template>
  <div>
    <FormNavbar :title="navbar_title" :buttons="buttons" :hasActive="hasActive" :editable="editable" :record="record"
      @click-left="onClickLeft" @click-right="onClickRight" />

    <OToolbar :editable="editable" :current-state="current_state" :states="header_statusbar_visible"
      :buttons="header_buttons" @button-clicked="handleBtnClicked" />

    <div v-if="!editable">
      <a-button size="small" @click="handleResetPassword"> 重置密码 </a-button>
    </div>

    <a-form-model ref="refForm" :label-col="labelCol" :wrapper-col="wrapperCol" :model="formValues" :rules="rules_edit"
      class="formNewStyle">
      <template v-for="meta in fields">
        <template v-if="invisible_get(meta)">
          <!-- invisible: {{ meta.name }}: {{ record[meta.name] }} -->
        </template>

        <template v-else>
          <FormField :key="meta.name" :field-name="meta.name" ref="refField" width="120px" v-model="formValues"
            :editable="editable" :fields="fields" :view-info="viewInfo" :data-info="dataInfo" @change="handleChange" />
        </template>
      </template>
    </a-form-model>
    <a-modal title="重置密码" :visible="resetPassword" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="cancelBtn"
      :closable="false" :okText="'重置'" :cancelText="'取消'" :maskClosable="false">
      <div>
        <div class="formStyle">登录：{{ this.record.login }}</div>
        <div class="formStyle">名称：{{ this.record.name }}</div>

        <template>
          密码：
          <a-input-password placeholder="input password" v-model='newPassword' class="newPasswordWidth" />
        </template>
      </div>
    </a-modal>


  </div>
</template>

<script>
import formMixin from '@/odooui/formMixin'
import FormNavbar from '@/components/ONavbar/formNavbar.vue'
import OToolbar from '@/components/OToolbar/index.vue'

import FormField from '@/components/OView/FormField.vue'

import api from '@/odoorpc'

export default {
  name: 'FormView',
  components: { FormNavbar, OToolbar, FormField },

  mixins: [formMixin],

  props: {},

  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      resetPassword: false,
      confirmLoading: false,
      newPassword: ''
    }
  },
  computed: {},

  watch: {},

  created() { },

  mounted() { },

  methods: {
    handleResetPassword() {
      const session = api.env.session
      const me = session.username
      const user_login = this.record.login
      console.log(me, user_login)

      if (me === user_login) {
        // do nothing
        // 提醒: 不能重置自己的密码, 请到 修改密码页面
        this.$message.warning('不能重置自己的密码, 请到修改密码页面!')
        return
      } else {
        // 弹窗 显示当前用户名 / 登录账号:  this.record.name , this.record.login
        // input 框 输入新密码
        // 确认之后, 调接口 重置 该用户的密码
        //  newPassword  从输入框获得
        // 调重置密码接口函数
        // this.reset_password(this.record.id,  newPassword  )
        this.resetPassword = true
      }
    },
    // 对话框点击确定请求
    handleOk() {
      this.confirmLoading = true;
      this.reset_password(this.record.id, this.newPassword)
    },
    cancelBtn() {
      this.resetPassword = false
      this.newPassword = ''
    },
    async reset_password(user_id, password) {
      const UserModel = api.env.model('res.users')
      await UserModel.write(user_id, { password })
      await this.closeDialog()
    },
    // 请求完毕关闭对话框
    closeDialog() {
      this.resetPassword = false
      this.confirmLoading = false;
      this.newPassword = ''
    },

    onClickLeft() {
      if (this.editable) {
        this.onClickCancel()
      } else {
        this.onClickBack()
      }
    },

    onClickRight(btn) {
      const btn_fns = {
        save: 'onClickSave',
        edit: 'onClickEdit',
        new: 'onClickNew',
        del: 'onClickDel',
        unlink: 'onClickDel',
        copy: 'handleOnCopy',
        archive: 'handleOnArchive',
        unarchive: 'handleOnUnarchive'
      }

      this[btn_fns[btn]]()
    }
  }
}
</script>

<style scoped type="text/css">
.formNewStyle {
  display: flex;
  background: white;
  flex-wrap: wrap;
  padding: 10px;
  margin-top: 10px;
}

:deep(.formNewStyle .ant-form-item) {
  margin-bottom: 5px;
  width: 400px;
}

.starSty {
  color: red;
  padding-right: 5px;
}

.formStyle {
  margin-bottom: 15px;
}

.newPasswordWidth {
  width: 70%;
}
</style>
